<template>
  <div class="user-info-container">
    <div class="user-info">
      <div style="align-items: center;display: flex;justify-content: space-between">
        <img class="headImg" v-show="userInfo.headImgUrl" :src="userInfo.headImgUrl" alt="">
        <span style="font-size:0.39rem;width: 1rem;margin-left: 0.2rem">积分</span>
        <span style="font-size:0.5rem;color: rgba(255, 69, 69, 1);font-weight: bold">{{ integral }}</span>
      </div>
      <iule-button @click="toExchange">兑换积分</iule-button>
    </div>
  </div>

</template>

<script>
import {mapGetters} from 'vuex'
import {formatNumber} from '../utils/format'
import IuleButton from './iule-button'

export default {
  name: 'userInfo',
  components: {
    IuleButton
  },
  methods: {
    toExchange () {
      this.$router.push({path: '/exchange'})
    }
  },
  computed: {
    integral () {
      return formatNumber(this.userInfo.integral)
    },
    ...mapGetters([
      'userInfo'
    ])
  }
}
</script>

<style scoped>
  .user-info-container{
    width: 100%;
    background-color: white;
  }
  .headImg {
    height: 0.7rem;
    width: 0.7rem;
    border-radius: 0.35rem;
  }
  .user-info {
    width:9rem;
    margin: 0 auto;
    height: 1rem;
    display: flex;
    background:rgba(255,255,255,1);
    justify-content: space-between;
    align-items: center;
  }
</style>
